<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp" />

    <title>激光打印机管理</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app">
    <!--<div>
        <span>查询打印机:</span>
        <el-col :span="8">
            <el-input
                    placeholder="请输入打印机编号"
                    v-model="input"
                    clearable>
            </el-input>
        <el-col :span="8">
    </div>-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="查询打印机">
            <el-input v-model="formInline.id" placeholder="请输入打印机编号"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="StartSelect">查询</el-button>
        </el-form-item>
    </el-form>

<template>
    <el-table
            :data="dyjs"
            style="width: 100% ;height: 400px">

        <el-table-column
                label="打印机ID"
                width="120">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.pnum }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="服务器"
                width="120">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.pserver }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="描述"
                width="130">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.pdescribe }}</span>
            </template>
        </el-table-column>

        <!--废除-->
        <!--<el-table-column
                label="可打印型号"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.modelable }}</span>
            </template>
        </el-table-column>-->

        <el-table-column
                label="IP"
                width="160">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.pip }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="产线"
                width="120">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.pline }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="备注"
                width="120">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.premark }}</span>
            </template>
        </el-table-column>
        <!--companyId:无须可的显示-->

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-button
            size="mini"
            @click="addDyj">添加</el-button>
    <el-button-group>
        <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="pageUp">上一页</el-button>
        <el-button type="primary" size="mini" @click="pageDown">下一页<i class="el-icon-arrow-right el-icon--right" ></i></el-button>
    </el-button-group>

</template>
    <!--用于修改，添加的对话框，在不需要时设置样式隐藏-->
    <el-dialog title="用户操作" :visible.sync="dialogFormVisible " @close="closeMyDialog">
        <el-form  :model="dyj" >
            <!--<el-form-item label="ID" :label-width="formLabelWidth">
                <el-input v-model="dyj.id" autocomplete="off"></el-input>
            </el-form-item>-->
            <el-form-item label="打印机编号" :label-width="formLabelWidth">
                <el-input v-model="dyj.pnum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="服务器" :label-width="formLabelWidth">
                <el-input v-model="dyj.pserver" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input v-model="dyj.pdescribe" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="IP地址" :label-width="formLabelWidth">
                <el-input v-model="dyj.pip" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产线" :label-width="formLabelWidth">
                <el-input v-model="dyj.pline" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="companyId" :label-width="formLabelWidth">
                <el-input v-model="dyj.companyId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="dyj.premark" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="saveDyj">提交</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--用于显示查询结果-->
    <el-drawer
            :visible.sync="table"
            direction="rtl"
            size="40%">
        <el-table :data="gridData">
            <el-table-column property="pnum" label="编号" width="80"></el-table-column>
            <el-table-column property="pserver" label="服务器" width="80"></el-table-column>
            <el-table-column property="pdescribe" label="描述" width="80"></el-table-column>
            <el-table-column property="pip" label="IP地址" width="80"></el-table-column>
            <el-table-column property="pline" label="生产线" width="80"></el-table-column>
            <el-table-column property="premark" label="备注" width="80"></el-table-column>
        </el-table>
    </el-drawer>
</div>


<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>

new Vue({
    el:"#app",
    data(){
        return{
            dyjs:null,
            total:0,//总条数
            current:1,//当前页数
            pageNum:1,//总页数
            dialogFormVisible:false,//弹出层
            dyj:{
                id:'',
                pnum:'',
                pserver:'',
                pdescribe:'',
                pip:'',
                pline:'',
                companyId:'',
                premark:''
            },
            formInline: {
                id: '',
            },
            //查询后弹出层
            table: false,
            gridData: [{
                id:'',
                pnum:'',
                pserver:'',
                pdescribe:'',
                pip:'',
                pline:'',
                companyId:'',
                premark:''
            }],

            formLabelWidth:'120px'
        }
    },
    mounted(){
        this.loadPage(1);
    },
    methods:{
        //修改
        handleEdit(index,row){
            console.log("there is 'handleEdit' console:")
            console.log(row)
            console.log(index,row);
            this.dyj.id=row.id;
            this.dyj.pnum=row.pnum;
            this.dyj.pserver=row.pserver;
            this.dyj.pdescribe=row.pdescribe;
            this.dyj.pip=row.pip;
            this.dyj.pline=row.pline;
            this.dyj.companyId=row.companyId;
            this.dyj.premark=row.premark;
            //弹出层
            this.dialogFormVisible=true;
        },
        //删除
        handleDelete(index,row){
            console.log(index,row)
            this.deleteSure(row.id)
        },
        addDyj(){
            this.dialogFormVisible=true;
        },
        //关闭对话框时(点击保存也会调用这个方法)
        closeMyDialog(){
            //清空弹出层中的数据
            this.dyj={
                id:'',
                pnum:'',
                pserver:'',
                pdescribe:'',
                pip:'',
                pline:'',
                companyId:'',
                premark:''
            }
            console.log("dyj数据已清除...")
            console.log(this.dyj)
        },
        //当点击保存
        saveDyj(){
            //判断操作类型
            if(this.dyj.id==''){
                console.log("添加操作")
                console.log(this.dyj.id)
                axios.post("/dyjAdd",this.dyj)
                    .then(value => {
                        if (value.data.code=='1'){
                            console.log("添加操作成功！")
                            this.loadpageNum();
                            this.loadPage(this.current)
                        }
                    })
            }else{
                console.log("更新操作")
                console.log(this.dyj.id)
                axios.post("/update",this.dyj)
                    .then(value => {
                        if (value.data.code=='1'){
                            console.log("更新操作成功！")
                            this.loadPage(this.current)
                            setTimeout(()=>{
                                console.log("success")
                        },500)

                        }
                    })
            }
            this.dialogFormVisible=false;
        },
        loadPage(current){
            this.current=current;
            //加载打印机
            axios.get("/dyjs/"+current).then(value => {
                if (value.data.code=='1'){
                    console.log("加载打印机成功！")
                    console.log(value.data.data.records)
                    this.dyjs=value.data.data.records;
                    this.total = value.data.data.total;
                    this.current = value.data.data.current;
                    /*this.pageSize = value.data.data.pageSize;*/
                    console.log("===加载打印机成功后，输出打印机内容为:===")
                    console.log(this.dyjs)
                    this.loadpageNum();
                }
            })
        },
        //查询页码
        loadpageNum(){
            this.pageNum=(this.total)%5==0?(this.total)/5:Math.trunc((this.total)/5)+1
            console.log("当前页面"+this.current)
            console.log("本次查询总页数:"+this.pageNum)
        },
        //前一页
        pageUp(){
            this.loadpageNum();
            if (this.current > 1){
                this.current=this.current-1;
            }else {
                //alert("当前页已是第一页...")
                this.error3()
            }
            this.loadPage(this.current)
        },
        //后一页
        pageDown(){
            this.loadpageNum();
            if (this.pageNum > this.current){
                this.current=this.current+1;
            }else {
                //alert("已经是最后一页了...")
                this.error4()
            }
            this.loadPage(this.current)
        },
        error1() {
            this.$message.error('无效操作,因为没有键入内容...');
        },
        error2() {
            this.$message.error('未查询到任何信息,请检查打印机编号是否正确...');
        },
        error3() {
            this.$message.error('当前页已是第一页...');
        },
        error4() {
            this.$message.error('已经是最后一页了...');
        },
        //删除前确认
        deleteSure(id) {
            this.$confirm('此操作将永久删除这些数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                axios.post("/dyjDel/"+id)
                    .then(value => {
                        if (value.data.code=='1'){
                            this.loadpageNum();
                            this.loadPage(this.current);
                        }
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        StartSelect() {
            if(this.formInline.id.replace(/(^\s*)|(\s*$)/g, '')==''){
                this.error1()
            }else {
            console.log(this.formInline.id);
            axios.get("/selectDyj/"+this.formInline.id)
                .then(value => {
                    if (value.data.code=='1'){
                        this.gridData[0]=value.data.data;
                        if (this.gridData[0]==null){
                            this.error2()
                        }else {
                        console.log("查询打印机成功！")
                        console.log("gridData[0]---->")
                        console.log(this.gridData[0])
                        this.table=true;
                    }}
                })}
        }

    }
})

</script>
</body>
</html>